<template>
    <div class="search-input" ref="searchRef">
        <div class="search">
          <el-input 
            placeholder="患者/电话/病历号" 
            class="input-2"
            v-model="person" 
            @input="queryCustomer"
            @blur="onBlur"
            @focus="queryCustomer"
            clearable
            >
            <template #prefix>
              <el-icon style="font-size: 20px; color: #000; "><search /></el-icon>
            </template>
          </el-input>
        </div>
      <div class="search-info" v-show="isSearchValue">
        <div class="info-head">
          <span>找到{{personListLength}}个患者</span>
        </div>
        <div class="info-main">
          <ul>
            <li class="person-item" v-for="i in personList" :key="i.id" >
              <div class="one-info" >
                <div class="avarat">
                  <template v-if="i.gender === '男'">
                    <el-avatar v-if="i.age < 17" :src="maleChild"></el-avatar>
                    <el-avatar v-if="i.age >= 18 && i.age < 60" :src="male"></el-avatar>
                    <el-avatar v-if="i.age >= 60" :src="maleOld"></el-avatar>
                  </template>
                  <template v-if="i.gender === '女'">
                    <el-avatar v-if="i.age < 17" :src="femaleChild"></el-avatar>
                    <el-avatar v-if="i.age >= 18 && i.age < 60" :src="female"></el-avatar>
                    <el-avatar v-if="i.age >= 60" :src="femaleOld"></el-avatar>
                  </template>
                </div>
                <div class="person-info" @click="handleItem(i)">
                  <div style="padding-top: 5px;">
                    <div class="name">{{i.name}}</div>
                    <div class="sex">
                      <el-icon v-if="i.gender === '男'" class="male-color"><male /></el-icon>
                      <el-icon v-if="i.gender === '女'" class=" female-color"><female /></el-icon>
                    </div>
                    
                  </div>
                  <div>
                    <div class="medical-num">
                      <el-icon><add-location /></el-icon>
                      <span>{{i.historySickNum || '暂无'}}</span> 
                    </div>
                    <div class="phone" style="padding-left: 5px">
                      <el-icon><postcard /></el-icon>
                      <span class="bg-blue"> {{i.age + '岁'}}</span><span>{{'(' + getBirthDay(i.birthDate)  + ')' || '暂无' }}</span> 
                    </div>
                  </div>
                  <div>
                    <div class="phone">
                      <el-icon><phone /></el-icon>
                      <span>{{i.mobileFirstNumStr || '暂无' }}</span> 
                    </div>
                  </div>
                  <div>
                    <div v-if="i.lastSickRecordSubCompanyName">
                      <span>{{'【' + i.lastSickRecordSubCompanyName + '】'}}</span>
                    </div>
                    <div>
                      <span v-if="i.lastSickRecordTime">{{getBirthDay(i.lastSickRecordTime)}}</span><span v-if="i.lastRecordDetailDoctorName">{{'(' + i.lastRecordDetailDoctorName + ')'}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- <div class="info-footer">
          <span>创建新患者</span>
        </div> -->
      </div>
    </div>

</template>

<script lang="ts">
import { AddLocation,Phone, Postcard, Male, Female, Search} from '@element-plus/icons-vue'
import { defineComponent, ref, watch, onMounted, defineAsyncComponent, onUnmounted } from '@vue/runtime-core'
import useRequet, { RespData } from "../../hook/network"
import { useRouter } from "vue-router"
import { ElMessage, ElMessageBox } from 'element-plus'
import { getBirthDay } from "../../usefn/getBirthday"

// 引入图片资源
import maleChild from "../../assets/image/male-child.png"
import male from "../../assets/image/male-adult.png"
import maleOld from "../../assets/image/male-old.png"
import femaleChild from "../../assets/image/female-child.png"
import female from "../../assets/image/female-adult.png"
import femaleOld from "../../assets/image/female-old.png"

// 防抖
import { debounce } from "../../utils/debounce"


export default defineComponent ({
  components: {
    Phone, Postcard, Male, Female, AddLocation, Search
  },
  name: 'SearchName',
  props: {
    personName: [String , Number]
  },
  emits:['setName'],
  setup(props, ctx) {

    const request = useRequet({ path: "" });
    const router = useRouter()
    const isSearchValue = ref(false)
    let person = ref(props.personName || '')
    watch(() => props.personName, (newV) => {
      person.value = String(newV)
    })
    
    const personListLength = ref(0)
    const personList = ref([] as any[])
    const userId = ref()
    watch(() => personList.value, (newList, prevList) => {
      personListLength.value = newList.length || 0
    })

    // 得到数据
    const getPersonList = () => {
      if(!person.value) {
        isSearchValue.value = false
        return
      }
      request.sendRequest({
        address: `customer/info/queryCustomer`,
        params: {
          queryValue: person.value,
        },
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error('获取患者' + resp.msg)
          personList.value = resp.data.records
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "POST",
      })
    }
    let timer:any = null
    const debounceSearch = debounce(getPersonList, 800)
    const queryCustomer = () => {
      timer = setTimeout(() => {
        if(person.value) {
          isSearchValue.value = true
        }
      }, 200)
      debounceSearch()
      
    }

    const handleItem = (data: any) => {
      isSearchValue.value = false
      person.value = data.name
      ctx.emit('setName', data)
      
    }
    const onBlur = () => {
      timer = setTimeout(() => {
        isSearchValue.value = false
      },200)
    }
    onUnmounted(() => {
      clearTimeout(timer)
      timer = null
    })
    const searchRef = ref(null)

    return {
      searchRef,
      person,
      isSearchValue,
      personList,
      personListLength,
      queryCustomer,
      handleItem,
      onBlur,
      userId,
      getBirthDay,

      maleChild,
      male,
      maleOld,
      femaleChild,
      female,
      femaleOld,
    }
  }
})
</script>

<style lang="scss" scoped>
  .search-input {
    position: relative;

    .search-info {
      position: absolute;
      top: 50px;
      z-index: 99;
      min-width: 380px;
      background-color: white;
      border-radius: 4px;
      box-shadow: 0px 2px 8px #e9e9e9;
      display: flex;
      flex-direction: column;
      font-size: 13px;
      color: $primaryText;
      max-height: 330px;

      .info-head {
        height: 30px;
        line-height: 30px;
        color: $regularText;
        padding-left: 10px;
        border-bottom: 1px solid #e9e9e9;
      }

      .info-main {
        flex: 1;
        overflow-y: auto;

        ul, li {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .person-item {
          max-height: 80px;
          
          .one-info {
            height: 100%;
            display: flex;
            border-bottom: 1px solid #e4e5e7;
            .avarat {
              padding: 5px;

              .icon {
                width: 24px;
                height: 24px;
                padding: 5px 0px 0px 10px;
              }
            }

            .person-info {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              flex: 1;
              cursor: pointer;

              & > div {
                display: flex;
                flex-direction: row;
              }

              .name {
                font-weight: 600;
              }
              .sex {
                width: 20px;
                height: 20px;
                background: #409eff;
                border-radius: 50%;
                text-align: center;
                & > i {
                  color: white;
                }
              }
              

              .medical-num {
                display: flex;
              }

              .phone {
                display: flex;
                // margin: auto;
                align-items: center;
                justify-content: center;

                .bg-blue {
                  background-color: #67c23a;
                  border-radius: 4px;
                  color: #fff;
                  padding: 2px 3px;
                  margin: 0 3px;
                  font-size: 12px;
                }
              }
            }

            .icon {
              font-size: 16px;
              text-align: right;
              
              padding-top: 5px;
              
              & > abbr > .icon-jinru_huabanfuben:before {
                color: $primaryText;
                cursor: pointer;
              }
            }

            .icon:hover {
              & > abbr > .icon-jinru_huabanfuben:before {
                color: $mainColor;
                font-weight: 600;
              }
              
            }
          }

          .one-info:hover {
            background-color: #f5f6f7;
            .icon {
              color: $mainColor;
            }
          }
        }
      }

      .info-footer {
        height: 40px;
        line-height: 40px;
        color: $mainColor;
        border-top: 1px solid #e9e9e9;
        padding-left: 10px;
      }
    }
  }

  :deep(.el-input__prefix) {
    padding-top: 5px;
  }
</style>